<template>
	<!--  <HeaderLayout></HeaderLayout> -->

	<view class="equipmentLayout host" style="margin: 0 auto; height: 100%; box-sizing: border-box">
		<view style="height: 100%; display: flex; flex-direction: column; padding: 10px; box-sizing: border-box;">
			<view style="height: 92%; box-sizing: border-box;display: flex;flex-direction: column;">
				<mainLeft v-if="props == 0" :id="Number(id)"></mainLeft>
				<mainRight v-if="props == 1" :id="Number(id)"></mainRight>
				<hy v-if="props == 2" :id="Number(id)"></hy>
				<lj v-if="props == 3" :id="Number(id)"></lj>
			</view>
			<view class="btn-group">
				<u-button v-for="(item, index) in btnList" :key="index" :type="btnGroup[item].type"
					:class="{ 'default-border-color': btnGroup[item].type === 'default' }"
					@click="btnRouteComputed(btnGroup[item].history, btnGroup[item].path)" shape="circle">
					{{ btnGroup[item].text }}
				</u-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		computed,
		ref,
		onMounted
	} from "vue";
	// import HeaderLayout from "@/components/layout/HeaderLayout.vue";

	import {
	  routerPush,
	  routerReplace,
	  routerGo,
	} from "@/plugins/index.js";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const btnList = ref([]); // 在每个页面中定义按钮列表
	let props = ref(0);
	let id = ref(0)
	onLoad((options) => {
		props.value = options.props
		id.value = options.id ? options.id : 0
		btnList.value = metn[options.id]
	});
	const metn = reactive([
		[0, 1, 2, 3, 4, 5, 6, 7],
		[21, 22, 23, 24, 25, 5, 6,7],
		[20, 7],
		[14, 7],
		[10, 7],
		[26, 7]
	])
	const btnGroup = reactive([{
			id: 0,
			text: "Main",
			path: `/pages/equipment/main?props=${0}&id=${0}`,
			history: false,
			type: "info",
		},
		{
			id: 1,
			text: "温度",
			path: `/pages/equipment/main?props=${0}&id=${5}`,
			history: false,
			type: "primary",
		},
		{
			id: 2,
			text: "压力",
			path: `/pages/equipment/main?props=${0}&id=${2}`,
			history: false,
			type: "success",
		},
		{
			id: 3,
			text: "排温",
			path: `/pages/equipment/main?props=${0}&id=${3}`,
			history: false,
			type: "default",
		},
		{
			id: 4,
			text: "轴承",
			path: `/pages/equipment/main?props=${0}&id=${4}`,
			history: false,
			type: "error",
		},
		{
			id: 5,
			text: "LNG",
			path: "0",
			history: false,
			type: "warning",
		},
		{
			id: 6,
			text: "其他",
			path: "0",
			history: false,
			type: "primary",
		},
		{
			id: 7,
			text: "报警",
			path: "/pages/callpoliceactive/callpoliceactive",
			history: true,
			type: "error",
		},
		{
			id: 8,
			text: "返回",
			path: "-1",
			history: true,
			type: "info",
		},
		{
			id: 9,
			text: "Info",
			path: "0",
			history: true,
			type: "info",
		},
		{
			id: 10,
			text: "发电机组",
			path: `/pages/equipment/main?props=${3}&id=${5}`,
			history: false,
			type: "success",
		},
		{
			id: 11,
			text: "2#机组",
			path: "/equipment/fdjz/2",
			history: false,
			type: "success",
		},
		{
			id: 12,
			text: "3#机组",
			path: "/equipment/fdjz/3",
			history: false,
			type: "success",
		},
		{
			id: 13,
			text: "应急机组",
			path: "/equipment/fdjz/4",
			history: false,
			type: "warning",
		},
		{
			id: 14,
			text: "货油泵",
			path: `/pages/equipment/main?props=${2}&id=${2}`,
			history: false,
			type: "warning",
		},
		{
			id: 15,
			text: "2#货油泵",
			path: "/equipment/hyg/2",
			history: false,
			type: "success",
		},
		{
			id: 16,
			text: "3#货油泵",
			path: "/equipment/hyg/3",
			history: false,
			type: "warning",
		},
		{
			id: 17,
			text: "扫舱泵",
			path: "/equipment/hyg/4",
			history: false,
			type: "error",
		},
		{
			id: 18,
			text: "1#压载泵",
			path: "/equipment/hyg/5",
			history: false,
			type: "error",
		},
		{
			id: 19,
			text: "2#压载泵",
			path: "/equipment/hyg/6",
			history: false,
			type: "error",
		},
		{
			id: 20,
			text: "货油主机",
			path: `/pages/equipment/main?props=${2}&id=${3}`,
			history: false,
			type: "success",
		},
		{
			id: 21,
			text: "Main",
			path: `/pages/equipment/main?props=${1}&id=${1}`,
			history: false,
			type: "info",
		},
		{
			id: 22,
			text: "温度",
			path: `/pages/equipment/main?props=${1}&id=${22}`,
			history: false,
			type: "primary",
		},
		{
			id: 23,
			text: "压力",
			path: `/pages/equipment/main?props=${1}&id=${23}`,
			history: false,
			type: "success",
		},
		{
			id: 24,
			text: "排温",
			path: `/pages/equipment/main?props=${1}&id=${24}`,
			history: false,
			type: "default",
		},
		{
			id: 25,
			text: "轴承",
			path: `/pages/equipment/main?props=${1}&id=${25}`,
			history: false,
			type: "error",
		},
		{
			id: 26,
			text: "配电板",
			path: `/pages/equipment/main?props=${3}&id=${4}`,
			history: false,
			type: "success",
		},
		{
			id: 27,
			text: "货油",
			path: "/con2",
			history: false,
			type: "primary",
		},
	]);

	const btnRouteComputed = (history, path) => {
		if (!isNaN(Number(path))) {
			if(Number(path)==0){
			return uni.switchTab({
					url: '/pages/navigate/navigate'
			});
			}
			return routerGo(path)
		}
		return history ? uni.navigateTo({
			url: path
		}) : uni.redirectTo({
			url: path
		});
	};

	// 获取当前页面路径
	const currentPath = computed(() => {
		return getCurrentPage().route;
	});

	// 获取当前页面对象
	function getCurrentPage() {
		const pages = getCurrentPages();
		return pages[pages.length - 1];
	}

	onMounted(() => {

	});
</script>

<style scoped lang="scss">
	.btn-group {
		height: 8%;
		display: flex;
		align-items: center;
		z-index: 10;
	}

	.host {
		height: 100%;
		background: rgb(45, 73, 97);

		.info {
			color: #fff;
		}
	}

	.default-border-color {
		color: #fff;
		background-color: #909399;
		border-color: #909399;
		border-width: 0.0625rem; // 1px / 16px = 0.0625rem
		border-style: solid;
	}
</style>